<template>
	<view>
		<view class="tabr" :style="{top:headerTop}">
			<view :class="{on:typeClass=='goods'}" @click="switchType('goods')">商品</view>
			<view :class="{on:typeClass=='shop'}" @click="switchType('shop')">店铺</view>
			<view class="border" :class="typeClass"></view>
		</view>
		<view class="edit-row">
			<text class="font28 color999">共{{recordLength}}条，仅为您保存最近7天的浏览记录</text>
			<text class="font28" style="color: #FF5E00;" @click="edit(checkHide,typeClass)">{{checkHide?'完成':'编辑'}}</text>
		</view>
		<view class="list">
			<!-- 优惠券列表 -->
			<view class="sub-list goods" :class="subState">
				<view class="tis" v-if="dataObjGoods.length==0">没有数据~</view>
				<view class="all-row" v-for="(item,index) in goodsList" :key="index">
					<view class="font56 colorfont time" :class="checkHide?'check-hide':''">
						{{index}}
					</view>
					<view class="row" v-for="(row,indexs) in item" :key="indexs">
						<!-- 删除按钮 -->
						<view class="menu" @tap.stop="deleteCoupon(row.goodsId,item,'goods')">
							<view class="font30">删除</view>
						</view>
						<!-- content -->

						<view class="carrier" :class="[typeClass=='goods'?theIndex==(index+row.goodsId)?'open':oldIndex==(index+row.goodsId)?'close':'':'']"
						 @touchstart="touchStart((index+row.goodsId),$event)" @touchmove="touchMove((index+row.goodsId),$event)" @touchend="touchEnd((index+row.goodsId),$event)">
							<view class="goods-info">
								<view class="checkbox-box" v-if="checkHide">
									<label>
										<checkbox :value="0" :checked="row.selected" @click="allCheck('goods','item', row.goodsId)" /><text></text>
									</label>
								</view>
								<view class="img" @click="navTo('product',row.goodsId)">
									<image :src="row.goodsImage"></image>
								</view>
								<view class="info" @click="navTo('product',row.goodsId)">
									<view class="title">{{row.goodsTitle}}</view>
									<view class="price-number">
										<view class="price">￥{{row.minGoodsPrice | money}}</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="sub-list shop" :class="subState">
				<view class="tis" v-if="dataObjShop.length==0">没有数据~</view>
				<view class="all-row" v-for="(item,index) in shopList" :key="index">
					<view class="font56 colorfont time" :class="checkHide?'check-hide':''">
						{{index}}
					</view>
					<view class="row" v-for="(row,indexs) in item" :key="indexs">
						<!-- 删除按钮 -->
						<view class="menu" @tap.stop="deleteCoupon(row.shopId,item,'shop')">
							<view class="font30">删除</view>
						</view>
						<!-- content -->

						<view class="carrier" :class="[typeClass=='shop'?theIndex==(index+row.shopId)?'open':oldIndex==(index+row.shopId)?'close':'':'']"
						 @touchstart="touchStart((index+row.shopId),$event)" @touchmove="touchMove((index+row.shopId),$event)" @touchend="touchEnd((index+row.shopId),$event)">
							<view class="goods-info">
								<view class="checkbox-box" v-if="checkHide">
									<label>
										<checkbox :value="0" :checked="row.selected" @click="allCheck('shop','item', row.shopId)" /><text></text>
									</label>
								</view>
								<view class="img" @click="navTo('storeDetailShop',row.shopId)">
									<image :src="row.shopLogo"></image>
								</view>
								<view class="info" @click="navTo('storeDetailShop',row.shopId)">
									<view class="title">{{row.shopName}}</view>
									<view class="price-number">
										<view class="infos">
											<image src="../../../static/home/store/star.png" mode="widthFix"></image>
											<text class="font20 color999" style="margin-left: 10rpx;">{{row.follow}}人</text>
											<text class="font20 color999" style="margin-left: 10rpx;">据我1.2km</text> 
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="bottom-check" v-show="checkHide">
			<view class=""  @click="allCheck(typeClass,'all')">
				<label>
					<checkbox :value="0" :checked="allCheckStatus" /><text>全选</text>
				</label>
			</view>
			<view class="delete-btn"  @click="deleteAll(typeClass)">
				删除记录
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				goodsList: {},
				shopList:{},
				headerTop: 0,
				//控制滑动效果
				typeClass: 'goods',
				subState: '',
				theIndex: null,
				oldIndex: null,
				isStop: false,
				checkHide: false,
				allChecked: false,
				recordLength:0,//记录
				goodsIdList:[],
				shopIdList:[],
				pageNo:1,//当前页
				pageNos:0,//总页数
				dataObjShop:[],//原始数据
				dataObjGoods:[],//原始数据
			}
		},
		//下拉刷新，需要自己在page.json文件中配置开启页面下拉刷新 "enablePullDownRefresh": true
		onPullDownRefresh() {
			if(this.typeClass=='goods'){
				this.loadGoodsInfo(this);
				this.pageNo = 1
			}else{
				this.loadStoreInfo(this);
				this.pageNo = 1
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom() {
			let that = this;
			
			if (that.pageNo >= that.pageNos) {
				return;
			}
			
			//加载我的订单
			that.pageNo= that.pageNo + 1;
			if(this.typeClass=='goods'){
				that.loadGoodsInfo(that);
			}else{
				that.loadStoreInfo(that);
			}
		},
		onLoad() {
			//兼容H5下排序栏位置
			// #ifdef H5
			//定时器方式循环获取高度为止，这么写的原因是onLoad中head未必已经渲染出来。
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
			this.loadGoodsInfo(this);
		},
		methods: {
			// 查询商品
			loadGoodsInfo(that){
				uni.showLoading({
					title:'加载中',
				})
				that.$http
					.request({
						method: 'GET', // 请求方法必须大写
						url: that.$requestApi.collectGoodsInfo+'/1/10',
						data: {}
					})
					.then(res => {
						console.log(res.data)
						uni.hideLoading()
						if (res.data.code === 200) {
							if (that.pageNo <= 1) {
								if (res.data.result.dataList.length == 0) {
									
								} else {
									that.goodsList= res.data.result.dataList;
								}
								that.pageNos= res.data.result.totalPage;
							} else {
								that.goodsList=that.goodsList.concat(res.data.result.dataList);
							}
							that.pageNo = res.data.result.currentPage;
							
							let goodsList = {};
							for(let item of that.goodsList){
								if(!goodsList[item.zeroTime]){
									goodsList[item.zeroTime] = [item]
								}else{
									goodsList[item.zeroTime].push(item)
								}
							}
							that.goodsList = goodsList;
							that.recordLength = res.data.result.currentActualPageSize;
							that.dataObjGoods = res.data.result.dataList
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			navTo(url,id){
				if(url=="product"){
					this.$Router.push({name:url,params:{id:id}});
				}else{
					this.$Router.push({name:url,params:{shopId:id}});
				}
				
			},
			// 查询店铺
			loadStoreInfo(that){
				uni.showLoading({
					title:'加载中',
				})
				that.$http
					.request({
						method: 'GET', // 请求方法必须大写
						url: that.$requestApi.collectStoreInfo+'/1/8',
						data: {}
					})
					.then(res => {
						uni.hideLoading()
						console.log(res.data)
						if (res.data.code === 200) {
							if (that.pageNo <= 1) {
								if (res.data.result.dataList.length == 0) {
									
								} else {
									that.shopList= res.data.result.dataList;
								}
								that.pageNos= res.data.result.totalPage;
							} else {
								that.shopList=that.shopList.concat(res.data.result.dataList);
							}
							that.pageNo = res.data.result.currentPage;
							
							let shopList = {};
							for(let item of res.data.result.dataList){
								if(!shopList[item.zeroTime]){
									shopList[item.zeroTime] = [item]
								}else{
									shopList[item.zeroTime].push(item)
								}
							}
							console.log(shopList)
							that.shopList = shopList;
							that.recordLength = res.data.result.currentActualPageSize;
							that.dataObjShop = res.data.result.dataList
						}
					})
					.catch(err => {
						console.log(err);
					});
				
			},
			// 全选
			allCheck(tab,type, index) {
				//选中状态处理
				if(tab=='goods'){
					if (type === 'item') {
						for(const i in this.goodsList){
							this.goodsList[i].forEach(item=>{
								if(item.goodsId == index){
									item.selected = !item.selected;
									if(item.selected==false){
										for(var i=0;i<this.goodsIdList.length;i++){
											if(item.goodsId==this.goodsIdList[i]){
												this.goodsIdList.splice(i,1)
											}
										}
										
									}else{
										this.goodsIdList.push(item.goodsId)
									}
								}
							})
							
						}
						
						this.allChecked = false
					} else {
						const checked = !this.allChecked
						const list = this.goodsList;
						for(const i in list){
							let goodtList = list[i].map(item=>{
								item.selected = checked;
								if(checked){
									if(this.goodsIdList.includes(item.goodsId)){
										return
									}else{
										this.goodsIdList.push(item.goodsId)
									}
								}else{
									this.goodsIdList=[];
								}
								return item;
							});
						}
						this.goodsList = list;
						this.allChecked = checked;
					}
				}else{
					if (type === 'item') {
						for(const i in this.shopList){
							this.shopList[i].forEach(item=>{
								if(item.shopId == index){
									item.selected = !item.selected;
									if(item.selected==false){
										for(var i=0;i<this.shopIdList.length;i++){
											if(item.shopId==this.shopIdList[i]){
												this.shopIdList.splice(i,1)
											}
										}
										
									}else{
										this.shopIdList.push(item.shopId)
									}
								}
							})
							
						}
						
						this.allChecked = false
					} else {
						const checked = !this.allChecked
						const list = this.shopList;
						for(const i in list){
							let shopList = list[i].map(item=>{
								item.selected = checked;
								if(checked){
									if(this.shopIdList.includes(item.shopId)){
										return
									}else{
										this.shopIdList.push(item.shopId)
									}
								}else{
									this.shopIdList=[];
								}
								return item;
							});
						}
						this.shopList = list;
						this.allChecked = checked;
					}
				}
				
			},
			// 编辑
			edit(value,tab) {
				if(tab=='goods'){
					if (value) {
						const list = this.goodsList;
						for(const i in list){
							let goodtList = list[i].map(item=>{
								item.selected = false;
								return item;
							});
						}
						this.goodsList = list;
						this.allChecked = false;
						this.checkHide = false;
					} else {
						this.checkHide = true;
					}
				}else{
					if (value) {
						const list = this.shopList;
						for(const i in list){
							let shopList = list[i].map(item=>{
								item.selected = false;
								return item;
							});
						}
						this.shopList = list;
						this.allChecked = false;
						this.checkHide = false;
					} else {
						this.checkHide = true;
					}
				}
				

			},
			switchType(type) {
				console.log(this.typeClass)
				console.log(type)
				if (this.typeClass == type) {
					return;
				}
				if(type == 'goods'){
					this.loadGoodsInfo(this);
				}else{
					this.loadStoreInfo(this);
				}
				
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				this.typeClass = type;
				this.subState = this.typeClass == '' ? '' : 'show' + type;
				setTimeout(() => {
					this.oldIndex = null;
					this.theIndex = null;
					this.subState = this.typeClass == 'goods' ? '' : this.subState;
				}, 200)
			},
			//控制左滑删除效果-begin
			touchStart(index, event) {
				
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				this.oldIndex = this.theIndex;
				this.theIndex = null;
				//初始坐标
				this.initXY = [event.touches[0].pageX, event.touches[0].pageY];
				
			},
			touchMove(index, event) {
				//多点触控不触发
				if (event.touches.length > 1) {
					this.isStop = true;
					return;
				}
				let moveX = event.touches[0].pageX - this.initXY[0];
				let moveY = event.touches[0].pageY - this.initXY[1];

				if (this.isStop || Math.abs(moveX) < 5) {
					return;
				}
				if (Math.abs(moveY) > Math.abs(moveX)) {
					// 竖向滑动-不触发左滑效果
					this.isStop = true;
					return;
				}

				if (moveX < 0) {
					this.theIndex = index;
					this.isStop = true;
				} else if (moveX > 0) {
					if (this.theIndex != null && this.oldIndex == this.theIndex) {
						this.oldIndex = index;
						this.theIndex = null;
						this.isStop = true;
						setTimeout(() => {
							this.oldIndex = null;
						}, 150)
					}
				}
			},

			touchEnd(index, $event) {
				//解除禁止触发状态
				this.isStop = false;
			},

			deleteAll(tab){
				console.log(this.goodsIdList)
				console.log(this.shopIdList)
				let that = this;
				uni.showModal({
				    title: '确定删除所有记录吗？',
				    content: '删除记录后，将不能恢复。',
				    success: function (res) {
				        if (res.confirm) {
							if(tab=='goods'){
								that.cancelCollection(that,that.goodsIdList,tab);
							}else{
								that.cancelCollection(that,that.shopIdList,tab);
							}
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
			},
			//删除商品
			deleteCoupon(id, List,tab) {
				let that = this;
				uni.showModal({
				    title: '确定删除所有记录吗？',
				    content: '删除记录后，将不能恢复。',
				    success: function (res) {
				        if (res.confirm) {
				            
							if(tab=='goods'){
								let len = List.length;
								for (let i = 0; i < len; i++) {
									if (id == List[i].goodsId) {
										List.splice(i, 1);
										break;
									}
								}
							}else{
								let len = List.length;
								for (let i = 0; i < len; i++) {
									if (id == List[i].shopId) {
										List.splice(i, 1);
										break;
									}
								}
							}
							
				            that.oldIndex = null;
				            that.theIndex = null;
				            let ids = [];
				            ids.push(id)
				            that.cancelCollection(that,ids,tab);
				        } else if (res.cancel) {
				            console.log('用户点击取消');
				        }
				    }
				});
				
			},
			// 删除商品请求
			cancelCollection(that,ids,tab){
				let type = 0
				if(tab=='goods'){
					type = 1
				}else{
					type = 2
				}
				that.$http
					.request({
						method: 'DELETE', // 请求方法必须大写
						url: that.$requestApi.browseLog,
						data: {
							ids:ids,
							type:type
						}
					})
					.then(res => {
						console.log(res.data)
						if (res.data.code === 200) {
							if(tab=='goods'){
								this.loadGoodsInfo(this);
								this.pageNo = 1
							}else{
								this.loadStoreInfo(this);
								this.pageNo = 1
							}
							this.$api.msg('删除成功~')
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
		}
	}
</script>
<style lang="scss">
	view {
		display: flex;
		flex-wrap: wrap;

	}

	page {
		position: relative;
		background-color: #fff;
	}

	.hidden {
		display: none !important;
	}

	.edit-row {
		width: 100%;
		background: rgba(245, 245, 250, 1);
		padding: 24upx 35upx;
		text-align: right;
		display: flex;
		justify-content: space-between;
	}
	.check-hide{
		margin-left: 90upx;
	}

	.tabr {
		background-color: #fff;
		width: 100%;
		height: 95upx;
		padding: 0 3%;
		position: sticky;
		z-index: 10;

		view {
			width: 50%;
			height: 90upx;
			justify-content: center;
			align-items: center;
			font-size: 34upx;
			color: #0B0E11;
			position: relative;
		}

		.on {
			color: #FF5E00;
		}

		.border {
			height: 6upx;
			background-color: #FF5E00;
			transition: all .3s ease-out;
			width: 40upx;
			position: absolute;
			bottom: 0;
			left: 180upx;
			border-radius: 4upx;

			&.shop {
				transform: translate3d(355upx, 0, 0);
			}
		}

	}

	.list {
		width: 100%;
		display: block;
		position: relative;
		background-color: #fff;
	}

	@keyframes showGoods {
		0% {
			transform: translateX(-100%);
		}

		100% {
			transform: translateX(0);
		}
	}

	@keyframes showShop {
		0% {
			transform: translateX(0);
		}

		100% {
			transform: translateX(-100%);
		}
	}

	.bottom-check {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30upx;
		height: 100upx;
		box-shadow: 0px -10px 30px rgba(0, 0, 0, 0.04);
		background-color: #fff;
		z-index: 999;
		.delete-btn {
			padding: 10upx 26upx;
			background: linear-gradient(86deg, rgba(255, 94, 0, 1) 0%, rgba(255, 35, 0, 1) 100%);
			border-radius: 60upx;
			font-size: 28upx;
			color: #fff;
		}

		text {
			font-size: 34rpx;
			color: #0B0E11;
			margin-left: 20upx;
		}
	}

	checkbox .wx-checkbox-input {
		border-radius: 50%;
	}
	
	/*checkbox选中后样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		background:#FF5E00;
		box-shadow:0px 6upx 10upx rgba(255,94,0,0.2);
	}
	
	/*checkbox选中后图标样式  */
	checkbox .wx-checkbox-input.wx-checkbox-input-checked::before {
		width: 40rpx;
		height: 40rpx;
		line-height: 40rpx;
		text-align: center;
		font-size: 30rpx;
		color: #fff;
		background: transparent;
		transform: translate(-50%, -50%) scale(1);
		-webkit-transform: translate(-50%, -50%) scale(1);
	}
	
	.sub-list {
		&.shop {
			position: absolute;
			top: 0;
			left: 100%;
			display: none;
		}

		&.showgoods {
			display: flex;
			animation: showGoods 0.20s linear both;
		}

		&.showshop {
			display: flex;
			animation: showShop 0.20s linear both;
		}

		width: 100%;
		padding: 0 0 120upx 0;

		.tis {
			width: 100%;
			height: 60upx;
			justify-content: center;
			align-items: center;
			font-size: 32upx;
		}

		&.goods {
			.all-row {
				width: 100%;

				.time {
					padding: 35upx;
				}

				.row {
					width: 100%;
					height: 34vw;
					align-items: center;
					position: relative;
					overflow: hidden;
					border-bottom: solid 1upx #F5F5FA;

					.menu {
						.icon {
							color: #fff;
							font-size: 50upx;
						}

						position: absolute;
						width: 200upx;
						height: 100%;
						right: 0;
						justify-content: center;
						align-items: center;
						background-color: red;
						color: #fff;
						z-index: 2;
					}

					.carrier {
						@keyframes showMenu {
							0% {
								transform: translateX(0);
							}

							100% {
								transform: translateX(-28%);
							}
						}

						@keyframes closeMenu {
							0% {
								transform: translateX(-28%);
							}

							100% {
								transform: translateX(0);
							}
						}

						&.open {
							animation: showMenu 0.25s linear both;
						}

						&.close {
							animation: closeMenu 0.15s linear both;
						}

						background-color: #fff;

						position: absolute;
						width: 100%;
						padding: 0 0;
						height: 100%;
						z-index: 3;
						flex-wrap: nowrap;

						.goods-info {
							width: 100%;
							padding: 35upx;
							flex-wrap: nowrap;

							.img {
								width: calc(30vw - 20upx);
								height: calc(30vw - 20upx);
								border-radius: 10upx;
								overflow: hidden;
								flex-shrink: 0;
								margin-right: 20upx;

								image {
									width: calc(30vw - 20upx);
									height: calc(30vw - 20upx);
								}
							}

							.info {
								width: 100%;
								height: calc(30vw - 20upx);
								overflow: hidden;
								flex-wrap: wrap;
								align-content: space-between;
								position: relative;

								.title {
									width: 100%;
									font-size: 30upx;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 2;
									overflow: hidden;
									color: #0B0E11;
								}

								.price-number {
									width: 100%;
									justify-content: space-between;
									align-items: baseline;

									.keep-num {
										font-size: 28upx;
										color: #FE2130;
									}

									.price {
										font-size: 40upx;
										color: #FE2130;
									}
								}
							}
						}
					}

				}
			}
		}

		&.shop {
			.all-row{
			width: 100%;

			.time {
				padding: 35upx;
			}
			.price-number{
				
				.infos{
					display: flex;
					align-items: center;
				}
				image{
					width: 18rpx;
					height: auto;
				}
			}
			.row {
				width: 100%;
				height: 20vw;
				align-items: center;
				position: relative;
				overflow: hidden;
				border-bottom: solid 1upx #F5F5FA;

				.menu {
					.icon {
						color: #fff;
						font-size: 50upx;
					}

					position: absolute;
					width: 200upx;
					height: 100%;
					right: 0;
					justify-content: center;
					align-items: center;
					background-color: red;
					color: #fff;
					z-index: 2;
				}

				.carrier {
					@keyframes showMenu {
						0% {
							transform: translateX(0);
						}

						100% {
							transform: translateX(-28%);
						}
					}

					@keyframes closeMenu {
						0% {
							transform: translateX(-28%);
						}

						100% {
							transform: translateX(0);
						}
					}

					&.open {
						animation: showMenu 0.25s linear both;
					}

					&.close {
						animation: closeMenu 0.15s linear both;
					}

					background-color: #fff;

					position: absolute;
					width: 100%;
					padding: 0 0;
					height: 100%;
					z-index: 3;
					flex-wrap: nowrap;

					.goods-info {
						width: 100%;
						padding: 20upx 35upx;
						flex-wrap: nowrap;

						.img {
							width: 15vw;
							height: 15vw;
							border-radius: 10upx;
							overflow: hidden;
							flex-shrink: 0;
							margin-right: 20upx;

							image {
								width: 15vw;
								height: 15vw;
							}
						}

						.info {
							width: 100%;
							height: 15vw;
							overflow: hidden;
							flex-wrap: wrap;
							align-content: space-between;
							position: relative;

							.title {
								width: 100%;
								font-size: 34upx;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 2;
								overflow: hidden;
							}

							.price-number {
								width: 100%;
								justify-content: space-between;
								align-items: baseline;

								.keep-num {
									font-size: 26upx;
									color: #999;
								}

								.price {
									font-size: 30upx;
									color: #f06c7a;
								}
							}
						}
					}
				}

			}
			}
		}

		.checkbox-box {
			display: flex;
			align-items: center;
			margin-right: 20upx;
		}



	}
</style>
